<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
    <title>边框</title>
</head>
<body>
<canvas id="myCanvas" width="300px" height="300px" style="background-color: #bbbbbb"></canvas>
<canvas id="hisCanvas" width="300px" height="300px" style="background-color: #bbbbbb"></canvas>
<script src="../../../js/ColorUtil.js"></script>
<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle = "#0000ff";
    ctx.lineWidth = 5;
    //墨色溢出线外。线宽/2
    //参数依次为left,top,width,height
    ctx.strokeRect(5 / 2, 5 / 2, 100, 100);

    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");

    ctx.strokeStyle = gradient;
    ctx.strokeRect(105, 5 / 2, 100, 100);


    var hisCavvas = document.getElementById('hisCanvas');
    var hctx = hisCavvas.getContext('2d');
    hctx.lineWidth = 3;

    var i = 0;
    var size = 5;
    for (i; i < 100; i++) {
        size = 5 + Math.random() * 20;
        hctx.strokeStyle = ColorUtil.randomColor();

        hctx.strokeRect(Math.random() * 297.5, Math.random() * 297.5, size, size);
    }


</script>
</body>
</html>